import React from "react";
// import { Switch } from "react-router";
import "../css/header.css"
import { Link } from "react-router-dom";
import {
    HashRouter,
    Switch,
    Route
} from "react-router-dom";
import Administration from './Administration';
import company from './company';
import xiaomi from './xiaomi';
import development from './development';

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // message:["小米商城","MIUI","loT","云服务","天星科技","有品","小爱开放平台","企业团购","资质证照","协议规则","下载app","智能生活","Select Location"]
        }
    }

    render() {
        return (
            <div className="header">
                <div className="top">
                    <ul>
                        <li>小米商城</li>
                        <li>MIUI</li>
                        <li>loT</li>
                        <li>云服务</li>
                        <li>天星科技</li>
                        <li>有品</li>
                        <li>小爱开放平台</li>
                        <li>企业团购</li>
                        <li>资质证照</li>
                        <li>协议规则</li>
                        <li>下载app</li>
                        <li>智能生活</li>
                        <li>Select Location</li>
                    </ul>
                    <ul>
                        <li onClick={() => {
                            this.props.history.push('/login')
                        }}>登录</li>
                        <li>注册</li>
                        <li>消息通知</li>
                    </ul>
                </div>



                <div className="commodity">
                    <ul>
                        <li>全部商品分类</li>
                        <li>小米手机</li>
                        <li>Redmi手机</li>
                        <li>电视</li>
                        <li>笔记本</li>
                        <li>家电</li>
                        <li>路由器</li>
                        <li>智能硬件</li>
                        <li>服务</li>
                        <li>社区</li>
                    </ul>
                    <div>
                        <input type="text"></input><button>搜索</button>
                    </div>
                </div>
                <HashRouter>
                    <div className="crumbs">
                        <div><Link to="/company">公司简介</Link></div>
                        <div><Link to="/Administration">管理团队</Link></div>
                        <div><Link to="/xiaomi">小米文化</Link></div>
                        <div><Link to="/development">发展经历</Link></div>
                    </div>
                    <div className="router_content">
                        <Switch>
                            <Route path="/company" component={company}></Route>
                            <Route path="/Administration" component={Administration}></Route>
                            <Route path="/xiaomi" component={xiaomi}></Route>
                            <Route path="/development" component={development}></Route>
                        </Switch>
                    </div>
                </HashRouter>
            </div>
        );
    }
};

export default Header;